<template>
  <div class="table">
    <el-table
      :data="list"
      :loading="loading"
      style="width: 100%"
      :span-method="dynamicSpanMethod"
      :header-cell-style="spanHeader"
      :cell-style="{
        'font-size': '14px',
        'font-weight': 400,
        color: '#333333',
      }"
      border
    >
      <el-table-column
        prop="vehicleType"
        label="车辆类型"
        align="center"
        min-width="90"
      />
      <el-table-column prop="dateType" label="日期类型" align="center" min-width="90" />
      <el-table-column
        prop="freeTime"
        label="免费时长(分钟)"
        align="center"
        min-width="120"
      />
      <el-table-column label="收费时段" align="center" min-width="110">
        <template #default="scope">
          {{ scope.row.startTime }}-{{ scope.row.endTime }}
        </template>
      </el-table-column>
      <el-table-column prop="method" label="收费方式" align="center" min-width="90" />
      <el-table-column prop="remark" label="计费规则" align="center" min-width="200" />
      <el-table-column
        prop="periodMax"
        label="时段封顶(元)"
        align="center"
        min-width="110"
      />
      <el-table-column label="日封顶(元)" align="center" min-width="140">
        <template #default="scope">
          {{ scope.row.max }}
          <span v-if="scope.row.max != '不封顶'">（{{ scope.row.maxType }}）</span>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty :image="imgNone" />
      </template>
    </el-table>
  </div>
</template>

<script setup>
import { ref } from "vue";
const imgNone = new URL("@/assets/image/imgNone.png", import.meta.url).href;

const props = defineProps({
  tableData: {
    type: Object,
    default: () => {},
  },
  loading: {
    type: Boolean,
    default: false,
  },
});

const spanHeader = ({ row, column, rowIndex, columnIndex }) => {
  let comStyle = {
    background: "#F1F1F1",
    "font-size": "14px",
    "font-weight": 600,
    color: "#333333",
  };
  return comStyle;
};

const groupedData = ref({
  smallCarWorkday: [], // 小型车 - 工作日
  smallCarNonWorkday: [], // 小型车 - 非工作日
  largeCarWorkday: [], // 大型车 - 工作日
  largeCarNonWorkday: [], // 大型车 - 非工作日
  newEnergyWorkday: [], // 新能源 - 工作日
  newEnergyNonWorkday: [], // 新能源 - 非工作日
  allCarWorkday: [], // 全部车型 - 工作日
  allCarNonWorkday: [], // 全部车型 - 非工作日
});

const list = ref([]);
function categorizeData() {
  // 清空分组数据
  Object.keys(groupedData.value).forEach((key) => {
    groupedData.value[key] = [];
  });

  // 遍历数据并分组
  props.tableData.forEach((item) => {
    if (item.vehicleType === "小型车") {
      if (item.dateType === "工作日") {
        groupedData.value.smallCarWorkday.push(item);
      } else if (item.dateType === "非工作日") {
        groupedData.value.smallCarNonWorkday.push(item);
      }
    } else if (item.vehicleType === "大型车") {
      if (item.dateType === "工作日") {
        groupedData.value.largeCarWorkday.push(item);
      } else if (item.dateType === "非工作日") {
        groupedData.value.largeCarNonWorkday.push(item);
      }
    } else if (item.vehicleType === "新能源") {
      if (item.dateType === "工作日") {
        groupedData.value.newEnergyWorkday.push(item);
      } else if (item.dateType === "非工作日") {
        groupedData.value.newEnergyNonWorkday.push(item);
      }
    } else if (item.vehicleType === "全车型") {
      if (item.dateType === "工作日") {
        groupedData.value.allCarWorkday.push(item);
      } else if (item.dateType === "非工作日") {
        groupedData.value.allCarNonWorkday.push(item);
      }
    }
  });

  // 合并所有数据
  const mergedData = [
    ...groupedData.value.smallCarWorkday,
    ...groupedData.value.smallCarNonWorkday,
    ...groupedData.value.largeCarWorkday,
    ...groupedData.value.largeCarNonWorkday,
    ...groupedData.value.newEnergyWorkday,
    ...groupedData.value.newEnergyNonWorkday,
    ...groupedData.value.allCarWorkday,
    ...groupedData.value.allCarNonWorkday,
  ];

  console.log(mergedData);
  list.value = mergedData;
}

categorizeData();
const dynamicSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    // 处理 vehicleType 列的合并
    const vehicleType = row.vehicleType;

    // 找到所有与当前行 vehicleType 相同的行
    const sameVehicleTypeRows = list.value.filter(
      (item) => item.vehicleType === vehicleType
    );

    // 找到当前 vehicleType 的第一行索引
    const firstRowIndex = list.value.findIndex(
      (item) => item.vehicleType === vehicleType
    );

    // 如果是当前 vehicleType 的第一行，返回合并的行数
    if (rowIndex === firstRowIndex) {
      return {
        rowspan: sameVehicleTypeRows.length,
        colspan: 1,
      };
    } else {
      // 否则不显示该单元格
      return {
        rowspan: 0,
        colspan: 0,
      };
    }
  }

  if (columnIndex === 1) {
    // 处理 dateType 列的合并
    const vehicleType = row.vehicleType;
    const dateType = row.dateType;

    // 找到所有与当前行 vehicleType 和 dateType 相同的行
    const sameDateTypeRows = list.value.filter(
      (item) => item.vehicleType === vehicleType && item.dateType === dateType
    );

    // 找到当前 vehicleType 和 dateType 的第一行索引
    const firstRowIndex = list.value.findIndex(
      (item) => item.vehicleType === vehicleType && item.dateType === dateType
    );

    // 如果是当前 vehicleType 和 dateType 的第一行，返回合并的行数
    if (rowIndex === firstRowIndex) {
      return {
        rowspan: sameDateTypeRows.length,
        colspan: 1,
      };
    } else {
      // 否则不显示该单元格
      return {
        rowspan: 0,
        colspan: 0,
      };
    }
  }
  if (columnIndex === 2) {
    const vehicleType = row.vehicleType;
    const dateType = row.dateType;
    const freeTime = row.freeTime;

    // 找到所有与当前行 vehicleType 和 dateType 和 freeTime 相同的行
    const sameFreeTimeRows = list.value.filter(
      (item) => item.vehicleType === vehicleType && item.dateType === dateType && item.freeTime === freeTime
    );

    // 找到当前 vehicleType 和 dateType 和 freeTime 的第一行索引
    const firstRowIndex = list.value.findIndex(
      (item) => item.vehicleType === vehicleType && item.dateType === dateType && item.freeTime === freeTime
    );

    if (rowIndex === firstRowIndex) {
      return {
        rowspan: sameFreeTimeRows.length,
        colspan: 1,
      };
    } else {
      // 否则不显示该单元格
      return {
        rowspan: 0,
        colspan: 0,
      };
    }
  }
};
</script>

<style lang="less" scoped>
.table {
  margin-top: 32px;
}
</style>
